<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>大模型验证中心</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        body {
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
            background-color: #f5f5f5;
            color: #333;
            line-height: 1.6;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        header {
            background-color: #3498db;
            color: white;
            padding: 1rem;
            text-align: center;
            margin-bottom: 2rem;
            border-radius: 5px;
        }
        nav {
            background-color: #2980b9;
            padding: 10px 0;
            margin-bottom: 20px;
            border-radius: 5px;
        }
        nav ul {
            display: flex;
            justify-content: center;
            list-style: none;
        }
        nav ul li {
            margin: 0 15px;
        }
        nav ul li a {
            color: white;
            text-decoration: none;
            font-weight: bold;
            padding: 5px 10px;
            border-radius: 3px;
            transition: background-color 0.3s;
        }
        nav ul li a:hover {
            background-color: rgba(255, 255, 255, 0.2);
        }
        .chat-container {
            display: flex;
            height: 70vh;
            gap: 20px;
        }
        .chat-messages {
            flex: 1;
            background-color: white;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            display: flex;
            flex-direction: column;
        }
        .messages-area {
            flex: 1;
            overflow-y: auto;
            padding: 20px;
        }
        .user-input {
            display: flex;
            padding: 10px;
            border-top: 1px solid #eee;
        }
        .user-input textarea {
            flex: 1;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            resize: none;
            height: 80px;
            font-family: inherit;
        }
        .user-input button {
            padding: 0 20px;
            margin-left: 10px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .user-input button:hover {
            background-color: #2980b9;
        }
        .user-input button:disabled {
            background-color: #ccc;
            cursor: not-allowed;
        }
        .chat-settings {
            width: 300px;
            background-color: white;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            padding: 20px;
        }
        .settings-section {
            margin-bottom: 20px;
        }
        .settings-section h3 {
            margin-bottom: 10px;
            border-bottom: 1px solid #eee;
            padding-bottom: 5px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        .form-group select,
        .form-group input {
            width: 100%;
            padding: 8px 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .message {
            margin-bottom: 15px;
            max-width: 80%;
        }
        .message.user {
            align-self: flex-end;
            background-color: #3498db;
            color: white;
            border-radius: 18px 18px 0 18px;
            padding: 10px 15px;
            margin-left: auto;
        }
        .message.assistant {
            align-self: flex-start;
            background-color: #f1f1f1;
            border-radius: 18px 18px 18px 0;
            padding: 10px 15px;
        }
        .message p {
            margin: 0;
        }
        .stream-token {
            display: inline;
        }
        .thinking {
            font-style: italic;
            color: #777;
            margin-bottom: 10px;
        }
        .loading {
            display: flex;
            align-items: center;
            font-style: italic;
            color: #777;
            margin: 10px 0;
        }
        .loading-dots {
            display: flex;
            margin-left: 5px;
        }
        .loading-dots span {
            height: 5px;
            width: 5px;
            margin: 0 1px;
            background-color: #777;
            border-radius: 50%;
            display: inline-block;
            animation: pulse 1.5s infinite ease-in-out;
        }
        .loading-dots span:nth-child(2) {
            animation-delay: 0.3s;
        }
        .loading-dots span:nth-child(3) {
            animation-delay: 0.6s;
        }
        @keyframes pulse {
            0%, 100% {
                transform: scale(0.8);
                opacity: 0.5;
            }
            50% {
                transform: scale(1.2);
                opacity: 1;
            }
        }
        .clear-btn {
            background-color: #e74c3c;
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 4px;
            cursor: pointer;
            margin-top: 10px;
            transition: background-color 0.3s;
        }
        .clear-btn:hover {
            background-color: #c0392b;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>大模型验证中心</h1>
        </header>
        
        <nav>
            <ul>
                <li><a href="/">首页</a></li>
                <li><a href="/model-playground.html">大模型验证</a></li>
            </ul>
        </nav>
        
        <div class="chat-container">
            <div class="chat-messages">
                <div id="messages" class="messages-area"></div>
                <div class="user-input">
                    <textarea id="userInput" placeholder="输入消息..."></textarea>
                    <button id="sendBtn">发送</button>
                </div>
            </div>
            
            <div class="chat-settings">
                <div class="settings-section">
                    <h3>模型设置</h3>
                    <div class="form-group">
                        <label for="modelSelect">选择模型</label>
                        <select id="modelSelect">
                            <option value="deepseek">华为盛大性能云：Deepseek R1</option>
                            <option value="qwen">华为盛大性能云：Qwen2.5 32B</option>
                        </select>
                    </div>
                </div>
                
                <div class="settings-section">
                    <h3>模型参数</h3>
                    <div class="form-group">
                        <label for="temperatureSlider">随机性 (Temperature): <span id="temperatureValue">0.7</span></label>
                        <input type="range" id="temperatureSlider" min="0" max="2" step="0.1" value="0.7">
                    </div>
                    <div class="form-group">
                        <label for="maxTokens">最大输出长度</label>
                        <input type="number" id="maxTokens" value="2048" min="10" max="4000">
                    </div>
                </div>
                
                <button id="clearChatBtn" class="clear-btn">清空对话</button>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const messagesContainer = document.getElementById('messages');
            const userInput = document.getElementById('userInput');
            const sendButton = document.getElementById('sendBtn');
            const modelSelect = document.getElementById('modelSelect');
            const temperatureSlider = document.getElementById('temperatureSlider');
            const temperatureValue = document.getElementById('temperatureValue');
            const maxTokens = document.getElementById('maxTokens');
            const clearChatBtn = document.getElementById('clearChatBtn');
            
            let isStreaming = false;
            let conversationHistory = [];
            
            // 更新温度显示值
            temperatureSlider.addEventListener('input', function() {
                temperatureValue.textContent = this.value;
            });
            
            // 发送消息
            sendButton.addEventListener('click', sendMessage);
            userInput.addEventListener('keydown', function(e) {
                if (e.key === 'Enter' && !e.shiftKey) {
                    e.preventDefault();
                    sendMessage();
                }
            });
            
            // 清空对话
            clearChatBtn.addEventListener('click', function() {
                conversationHistory = [];
                messagesContainer.innerHTML = '';
            });
            
            function sendMessage() {
                const message = userInput.value.trim();
                if (!message || isStreaming) return;
                
                // 添加用户消息到界面
                addMessage(message, 'user');
                userInput.value = '';
                
                // 记录对话历史
                conversationHistory.push({ role: 'user', content: message });
                
                // 显示加载指示器
                const loadingEl = document.createElement('div');
                loadingEl.className = 'loading';
                loadingEl.innerHTML = '模型思考中<div class="loading-dots"><span></span><span></span><span></span></div>';
                messagesContainer.appendChild(loadingEl);
                messagesContainer.scrollTop = messagesContainer.scrollHeight;
                
                // 禁用发送按钮
                isStreaming = true;
                sendButton.disabled = true;
                
                // 准备流式响应的容器
                const responseContainer = document.createElement('div');
                responseContainer.className = 'message assistant';
                
                // 请求流式响应
                fetchStreamResponse(message, responseContainer, loadingEl);
            }
            
            function fetchStreamResponse(message, responseContainer, loadingEl) {
                const model = modelSelect.value;
                const temperature = parseFloat(temperatureSlider.value);
                const max_tokens = parseInt(maxTokens.value);
                
                fetch('/python-api/chat', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        model: model,
                        messages: conversationHistory,
                        temperature: temperature,
                        max_tokens: max_tokens
                    })
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('服务器响应错误');
                    }
                    
                    // 删除加载指示器
                    messagesContainer.removeChild(loadingEl);
                    
                    // 添加空的响应容器
                    messagesContainer.appendChild(responseContainer);
                    
                    const reader = response.body.getReader();
                    const decoder = new TextDecoder();
                    let assistantResponse = '';
                    let isReasoningContent = true; // 默认先显示思维链
                    
                    // 创建思维链显示容器
                    const reasoningContainer = document.createElement('div');
                    reasoningContainer.className = 'thinking';
                    responseContainer.appendChild(reasoningContainer);
                    
                    // 创建最终回答容器
                    const contentContainer = document.createElement('p');
                    responseContainer.appendChild(contentContainer);
                    
                    function processStream({ done, value }) {
                        if (done) {
                            // 结束
                            isStreaming = false;
                            sendButton.disabled = false;
                            conversationHistory.push({ role: 'assistant', content: assistantResponse });
                            return;
                        }
                        
                        // 解码收到的数据块
                        const chunk = decoder.decode(value, { stream: true });
                        
                        // 检测是否从思维链转为最终回答
                        if (isReasoningContent && chunk.trim().length > 0 && reasoningContainer.textContent.length > 0) {
                            // 如果之前是在显示思维链，并且新内容与思维链格式不同，则可能是转为了最终回答
                            const lastFewChars = reasoningContainer.textContent.slice(-20);
                            if (lastFewChars.includes('\n\n') || lastFewChars.includes('总结：')) {
                                isReasoningContent = false;
                            }
                        }
                        
                        // 根据内容类型更新不同的容器
                        if (isReasoningContent) {
                            reasoningContainer.textContent += chunk;
                        } else {
                            assistantResponse += chunk;
                            contentContainer.textContent = assistantResponse;
                        }
                        
                        // 滚动到底部
                        messagesContainer.scrollTop = messagesContainer.scrollHeight;
                        
                        // 继续处理流
                        return reader.read().then(processStream);
                    }
                    
                    return reader.read().then(processStream);
                })
                .catch(error => {
                    console.error('Error:', error);
                    messagesContainer.removeChild(loadingEl);
                    
                    const errorMessage = document.createElement('div');
                    errorMessage.className = 'message assistant';
                    errorMessage.textContent = `出错了: ${error.message}`;
                    messagesContainer.appendChild(errorMessage);
                    
                    isStreaming = false;
                    sendButton.disabled = false;
                });
            }
            
            function addMessage(content, sender) {
                const messageEl = document.createElement('div');
                messageEl.className = `message ${sender}`;
                messageEl.textContent = content;
                messagesContainer.appendChild(messageEl);
                messagesContainer.scrollTop = messagesContainer.scrollHeight;
            }
        });
    </script>
</body>
</html>
